<template>
    <div class="segment">
        <functional :title="pageData.box.name" :icon="pageData.box.icon" type="adobeIllustrator">
            <el-collapse v-model="pageData.activeNames">
                <el-collapse-item title="常用样式" name="1">
                    <div class="punctuationList" v-if="toolData && toolData.length > 0">
                        <div v-for="(item, index) in toolData" :key="index" :title="item.label" class="punctuationListItem">
                            <div @click="itemClick(item, pageData)">
                                <el-image class="punctuationListItemimg" :src="`${filesUrl}${item.pic}`" fit="cover" />
                                <div class="itemNames">{{ item.label }}</div>
                            </div>
                            <!-- <div class="punctuationListItemcheckbox" v-if="pageData.isEditor && item.drawId">
                                <el-checkbox v-model="item.checked" @change="checkboxChange(item)" class="itemcheckbox" />
                            </div> -->
                        </div>
                    </div>
                    <div v-else class="nodeData">暂无数据</div>
                </el-collapse-item>
                <el-collapse-item title="自定义样式" name="2">
                    <div class="punctuationList" v-if="widget.customStyleItem && widget.customStyleItem.length > 0">
                        <div v-for="(item, index) in widget.customStyleItem" :key="index" :title="item.label" class="punctuationListItem">
                            <div @click="itemClick(item, pageData)">
                                <el-image
                                    class="punctuationListItemimg"
                                    :src="item.pic.includes('http') ? item.pic : item.pic.includes('sxnf-cloud') ? `${filesUrl1}${item.pic}` : `${filesUrl}${item.pic}`"
                                    fit="cover"
                                />
                                <div class="itemNames">{{ item.label }}</div>
                            </div>
                            <div class="punctuationListItemcheckbox" v-if="pageData.isEditor && item.drawId">
                                <el-checkbox v-model="item.checked" @change="checkboxChange(item)" class="itemcheckbox" />
                            </div>
                        </div>
                    </div>
                    <div v-else class="nodeData">暂无数据</div>
                </el-collapse-item>
            </el-collapse>
            <template #footer>
                <div class="submitBtn" v-if="pageData.isEditor">
                    <el-button color="#20a0ff" :dark="true" plain size="small" @click="cancelEditorPunctuationList(pageData)">取消</el-button>
                    <el-button color="#20a0ff" :dark="true" plain size="small" @click="removeEditorPunctuationList(pageData)">删除</el-button>
                </div>
                <div class="submitBtn" v-else>
                    <el-button color="#20a0ff" :dark="true" plain size="small" @click="pageData.dialogVisible = true">新增样式</el-button>
                    <el-button color="#20a0ff" v-if="toolData && toolData.length > 0" :dark="true" plain size="small" @click="openEditor">编辑</el-button>
                </div>
            </template>
        </functional>
        <el-dialog v-model="pageData.dialogVisible" :title="`新增${widget.adobeIllustratorData.name}`" width="350">
            <div class="functionaltopBtns">
                <div class="punctuationList" v-if="toolData.length > 0">
                    <div v-for="(item, index) in toolData" :key="index" v-show="!item.userId" :title="item.label" class="punctuationListItem" @click="newItemClick(item, pageData)">
                        <el-image class="punctuationListItemimg" :src="`${filesUrl}${item.pic}`" fit="cover" />
                        <div class="itemNames">{{ item.label }}</div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, watch } from "vue";
import { widget } from "@/utils/global";
import { ElMessage, ElMessageBox } from "element-plus";
import { itemClick, checkboxChange, cancelEditorPunctuationList, newItemClick, removeEditorPunctuationList } from "@/utils/draw/adobeIllustrator";
const pageData = reactive({
    list: widget.adobeIllustratorItems, // 样式列表
    activeNames: ["1", "2"], // 折叠面板
    dialogVisible: false, // 新增样式弹窗
    isEditor: false, // 编辑样式
    box: widget.adobeIllustratorData, // 外层盒子数据
});
/**
 * 常用样式
 */
const toolData = computed(() => {
    let data = JSON.parse(JSON.stringify(widget.adobeIllustratorItems));
    return data;
});
/**
 * 自定义样式
 */
const customDatalist = computed(() => {
    let data = JSON.parse(JSON.stringify(widget.customStyleItem));
    return data;
});
// const customData = reactive(widget.customStyleItem);
watch(
    () => customDatalist.value,
    (newVal) => {
        pageData.isEditor = false;
    },
    { deep: true }
);
const filesUrl = computed(() => {
    return import.meta.env.VITE_BASE_XYZ;
});
const filesUrl1 = computed(() => {
    return import.meta.env.VITE_BASE_ICON;
});
// 打开编辑
const openEditor = () => {
    if (customDatalist.value.length === 0) {
        ElMessage.warning("当前没有可以编辑的自定义样式");
        return;
    }
    pageData.isEditor = true;
};
</script>
